<template>
  <scroll-view scroll-y="true" :style="'height:'+app_viewHeight+'px'" @scrolltolower="getMore">
    <div class="inside_page inside_product" :style="{backgroundColor:app_tabBar.config.bodybgcolor}">
      <banner></banner>
      <subcolumn-nav :column_id="column.product.bigclass" @resetPage="resetPage"></subcolumn-nav>
      <list-page :config="config"></list-page>
    </div>
    <div class="no-more" v-if="!page_config.is_more && product_list.length>0"
       :style="{backgroundColor:app_tabBar.config.thirdcolor}">
      <span class="text">没有更多了</span>
    </div>
  </scroll-view>
</template>
<script>
import Banner from '@/components/common/Banner'
import SubcolumnNav from '@/components/common/SubcolumnNav'
import ListPage from '@/components/common/ListPage'
import { fetchListPage, getMoreList } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  components: {
    Banner,
    SubcolumnNav,
    ListPage
  },
  onShow() {
    this.loading = true
    fetchListPage(this.column.product, this)
  },
  computed: {
    ...mapGetters(['app_tabBar', 'app_viewHeight', 'product_list', 'column'])
  },
  data() {
    return {
      isLoad: true,
      loading: true,
      config: {
        type: 'product',
        style: ''
      },
      page_config: {
        page: 0,
        page_num: 0,
        is_more: true
      }
    }
  },
  methods: {
    getMore() {
      if (this.isLoad) {
        getMoreList('product', this)
      } else {
        console.log('please wait')
      }
    },
    resetPage(data){
        this.page_config=data
    }
  }
}
</script>
